﻿<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <title>关于商城</title>
    <!--    引入公共样式-->
    <th:block th:insert="~{front/include::head}"></th:block>
</head>

<body>
<!--引入页面头部导航栏-->
<header th:replace="~{front/include2::header}"></header>

<main class="main single-page">
    <div class="page-header breadcrumb-wrap">
        <div class="container">
            <div class="breadcrumb">
                <a th:href="@{/vm/front/index}" rel="nofollow">主页</a>
                <span></span> 帮助
                <span></span> 关于商城
            </div>
        </div>
    </div>
    <section class="section-padding">
        <div class="container pt-25">
            <div class="row">
                <div class="col-lg-6 align-self-center mb-lg-0 mb-4">
                    <h6 class="mt-0 mb-15 text-uppercase font-sm text-brand wow fadeIn animated">Our Company</h6>
                    <h1 class="font-heading mb-40">
                        We are Building The Destination For Getting Things Done
                    </h1>
                    <p>Tempus ultricies augue luctus et ut suscipit. Morbi arcu, ultrices purus dolor erat bibendum
                        sapien metus.</p>
                    <p>Tempus ultricies augue luctus et ut suscipit. Morbi arcu, ultrices purus dolor erat bibendum
                        sapien metus. Sit mi, pharetra, morbi arcu id. Pellentesque dapibus nibh augue senectus. </p>
                </div>
                <div class="col-lg-6">
                    <img th:src="@{/assets/front/imgs/page/about-1.png}" alt="">
                </div>
            </div>
        </div>
    </section>
    <section id="team" class="pt-25 wow fadeIn animated">
        <div class="container">
            <div class="row mb-50 align-items-center">
                <div class="col-md-6">
                    <h6 class="mt-0 mb-15 text-uppercase font-sm text-brand wow fadeIn animated">Our Team</h6>
                    <h2 class="mb-15 wow fadeIn animated">Top team of experts</h2>
                    <p class="text-grey-3 wow fadeIn animated">Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Ratione optio perferendis sequi mollitia quis autem ea cupiditate possimus!</p>
                </div>
                <div class="col-md-6 text-md-end mt-30">
                    <a class="btn btn-outline btn-lg btn-brand-outline font-weight-bold text-brand text-hover-white border-radius-5 btn-shadow-brand hover-up">All
                        Members</a>
                </div>
            </div>
            <div class="position-relative">
                <div class="row wow fadeIn animated">
                    <div class="col-lg-3 col-md-6">
                        <div class="blog-card border-radius-10 overflow-hidden text-center">
                            <img th:src="@{/assets/front/imgs/page/avatar-1.jpg}" alt="" class="border-radius-10 mb-30 hover-up">
                            <h4 class="fw-500 mb-0">Patric Adams</h4>
                            <p class="fw-400 text-brand mb-10">CEO & Co-Founder</p>
                            <div class="mobile-social-icon wow fadeIn animated mb-sm-5 mb-md-0 animated">
                                <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-facebook.svg}" alt=""></a>
                                <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-twitter.svg}" alt=""></a>
                                <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-instagram.svg}" alt=""></a>
                                <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-pinterest.svg}" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <!--col-->
                    <div class="col-lg-3 col-md-6">
                        <div class="blog-card border-radius-10 overflow-hidden text-center">
                            <img th:src="@{/assets/front/imgs/page/avatar-2.jpg}" alt="" class="border-radius-10 mb-30 hover-up">
                            <h4 class="fw-500 mb-0">Dilan Specter</h4>
                            <p class="fw-400 text-brand mb-10">Head Engineer</p>
                            <div class="mobile-social-icon wow fadeIn animated mb-sm-5 mb-md-0 animated">
                                <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-facebook.svg}" alt=""></a>
                                <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-twitter.svg}" alt=""></a>
                                <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-instagram.svg}" alt=""></a>
                                <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-pinterest.svg}" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <!--col-->
                    <div class="col-lg-3 col-md-6">
                        <div class="blog-card border-radius-10 overflow-hidden text-center">
                            <img th:src="@{/assets/front/imgs/page/avatar-3.jpg}" alt="" class="border-radius-10 mb-30 hover-up">
                            <h4 class="fw-500 mb-0">Tomas Baker</h4>
                            <p class="fw-400 text-brand mb-10">Senior Planner</p>
                            <div class="mobile-social-icon wow fadeIn animated mb-sm-5 mb-md-0 animated">
                                <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-facebook.svg}" alt=""></a>
                                <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-twitter.svg}" alt=""></a>
                                <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-instagram.svg}" alt=""></a>
                                <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-pinterest.svg}" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <!--col-->
                    <div class="col-lg-3 col-md-6">
                        <div class="blog-card border-radius-10 overflow-hidden text-center">
                            <img th:src="@{/assets/front/imgs/page/avatar-4.jpg}" alt="" class="border-radius-10 mb-30 hover-up">
                            <h4 class="fw-500 mb-0">Norton Mendos</h4>
                            <p class="fw-400 text-brand mb-10">Project Manager</p>
                            <div class="mobile-social-icon wow fadeIn animated mb-sm-5 mb-md-0 animated">
                                <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-facebook.svg}" alt=""></a>
                                <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-twitter.svg}" alt=""></a>
                                <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-instagram.svg}" alt=""></a>
                                <a href="#"><img th:src="@{/assets/front/imgs/theme/icons/icon-pinterest.svg}" alt=""></a>
                            </div>
                        </div>
                    </div>
                    <!--col-->
                </div>
            </div>
        </div>
    </section>
    <section id="work" class="mt-40 pt-50 pb-50 section-border">
        <div class="container">
            <div class="row mb-50">
                <div class="col-lg-12 col-md-12 text-center">
                    <h6 class="mt-0 mb-5 text-uppercase  text-brand font-sm wow fadeIn animated">Evara Coporation</h6>
                    <h2 class="mb-15 text-grey-1 wow fadeIn animated">Our main branches<br> around the world</h2>
                    <p class="w-50 m-auto text-grey-3 wow fadeIn animated">At vero eos et accusamus et iusto odio
                        dignissimos ducimus quiblanditiis praesentium. ebitis nesciunt voluptatum dicta reprehenderit
                        accusamus</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 text-center mb-md-0 mb-4">
                    <img class="btn-shadow-brand hover-up border-radius-10 bg-brand-muted wow fadeIn animated"
                         th:src="@{/assets/front/imgs/page/company-1.jpg}" alt="">
                    <h4 class="mt-30 mb-15 wow fadeIn animated">New York, USA</h4>
                    <p class="text-grey-3 wow fadeIn animated">27 Division St, New York<br>NY 10002, USA</p>
                </div>
                <div class="col-md-4 text-center mb-md-0 mb-4">
                    <img class="btn-shadow-brand hover-up border-radius-10 bg-brand-muted wow fadeIn animated"
                         th:src="@{/assets/front/imgs/page/company-2.jpg}" alt="">
                    <h4 class="mt-30 mb-15 wow fadeIn animated">Paris, France</h4>
                    <p class="text-grey-3 wow fadeIn animated">22 Rue des Carmes<br> 75005 Paris</p>
                </div>
                <div class="col-md-4 text-center">
                    <img class="btn-shadow-brand hover-up border-radius-10 bg-brand-muted wow fadeIn animated"
                         th:src="@{/assets/front/imgs/page/company-3.jpg}" alt="">
                    <h4 class="mt-30 mb-15 wow fadeIn animated">Jakarta, Indonesia</h4>
                    <p class="text-grey-3 wow fadeIn animated">2476 Raya Yogyakarta,<br>89090 Indonesia</p>
                </div>
            </div>
        </div>
    </section>
    <section id="testimonials" class="section-padding">
        <div class="container pt-25">
            <div class="row mb-50">
                <div class="col-lg-12 col-md-12 text-center">
                    <h6 class="mt-0 mb-10 text-uppercase  text-brand font-sm wow fadeIn animated">some facts</h6>
                    <h2 class="mb-15 text-grey-1 wow fadeIn animated">Take a look what<br> our clients say about us</h2>
                    <p class="w-50 m-auto text-grey-3 wow fadeIn animated">At vero eos et accusamus et iusto odio
                        dignissimos ducimus quiblanditiis praesentium. ebitis nesciunt voluptatum dicta reprehenderit
                        accusamus</p>
                </div>
            </div>
            <div class="row align-items-center">
                <div class="col-md-6 col-lg-4">
                    <div class="hero-card box-shadow-outer-6 wow fadeIn animated mb-30 hover-up d-flex">
                        <div class="hero-card-icon icon-left-2 hover-up ">
                            <img class="btn-shadow-brand hover-up border-radius-5 bg-brand-muted"
                                 th:src="@{/assets/front/imgs/page/avatar-1.jpg}" alt="">
                        </div>
                        <div class="pl-30">
                            <h5 class="mb-5 fw-500">
                                J. Bezos
                            </h5>
                            <p class="font-sm text-grey-5">Adobe Jsc</p>
                            <p class="text-grey-3">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis
                                nesciunt voluptatum dicta reprehenderit accusamus voluptatibus voluptas."</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="hero-card box-shadow-outer-6 wow fadeIn animated mb-30 hover-up d-flex">
                        <div class="hero-card-icon icon-left-2 hover-up ">
                            <img class="btn-shadow-brand hover-up border-radius-5 bg-brand-muted"
                                 th:src="@{/assets/front/imgs/page/avatar-3.jpg}" alt="">
                        </div>
                        <div class="pl-30">
                            <h5 class="mb-5 fw-500">
                                B.Gates
                            </h5>
                            <p class="font-sm text-grey-5">Adobe Jsc</p>
                            <p class="text-grey-3">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis
                                nesciunt voluptatum dicta reprehenderit accusamus voluptatibus voluptas."</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="hero-card box-shadow-outer-6 wow fadeIn animated mb-30 hover-up d-flex">
                        <div class="hero-card-icon icon-left-2 hover-up ">
                            <img class="btn-shadow-brand hover-up border-radius-5 bg-brand-muted"
                                 th:src="@{/assets/front/imgs/page/avatar-2.jpg}" alt="">
                        </div>
                        <div class="pl-30">
                            <h5 class="mb-5 fw-500">
                                B. Meyers
                            </h5>
                            <p class="font-sm text-grey-5">Adobe Jsc</p>
                            <p class="text-grey-3">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis
                                nesciunt voluptatum dicta reprehenderit accusamus voluptatibus voluptas."</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="hero-card box-shadow-outer-6 wow fadeIn animated mb-30 hover-up d-flex">
                        <div class="hero-card-icon icon-left-2 hover-up ">
                            <img class="btn-shadow-brand hover-up border-radius-5 bg-brand-muted"
                                 th:src="@{/assets/front/imgs/page/avatar-4.jpg}" alt="">
                        </div>
                        <div class="pl-30">
                            <h5 class="mb-5 fw-500">
                                J. Bezos
                            </h5>
                            <p class="font-sm text-grey-5">Adobe Jsc</p>
                            <p class="text-grey-3">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis
                                nesciunt voluptatum dicta reprehenderit accusamus voluptatibus voluptas."</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="hero-card box-shadow-outer-6 wow fadeIn animated mb-30 hover-up d-flex">
                        <div class="hero-card-icon icon-left-2 hover-up ">
                            <img class="btn-shadow-brand hover-up border-radius-5 bg-brand-muted"
                                 th:src="@{/assets/front/imgs/page/avatar-5.jpg}" alt="">
                        </div>
                        <div class="pl-30">
                            <h5 class="mb-5 fw-500">
                                B.Gates
                            </h5>
                            <p class="font-sm text-grey-5">Adobe Jsc</p>
                            <p class="text-grey-3">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis
                                nesciunt voluptatum dicta reprehenderit accusamus voluptatibus voluptas."</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="hero-card box-shadow-outer-6 wow fadeIn animated mb-30 hover-up d-flex">
                        <div class="hero-card-icon icon-left-2 hover-up ">
                            <img class="btn-shadow-brand hover-up border-radius-5 bg-brand-muted"
                                 th:src="@{/assets/front/imgs/page/avatar-1.jpg}" alt="">
                        </div>
                        <div class="pl-30">
                            <h5 class="mb-5 fw-500">
                                B. Meyers
                            </h5>
                            <p class="font-sm text-grey-5">Adobe Jsc</p>
                            <p class="text-grey-3">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis
                                nesciunt voluptatum dicta reprehenderit accusamus voluptatibus voluptas."</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-30">
                <div class="col-12 text-center">
                    <p class="wow fadeIn animated">
                        <a class="btn btn-brand text-white btn-shadow-brand hover-up btn-lg">View More</a>
                    </p>
                </div>
            </div>
        </div>
    </section>
    <section class="section-padding">
        <div class="container pb-25">
            <h3 class="section-title mb-20 wow fadeIn animated text-center"><span>Featured</span> Clients</h3>
            <div class="carausel-6-columns-cover position-relative wow fadeIn animated">
                <div class="carausel-6-columns text-center" id="carausel-6-columns-3">
                    <div class="brand-logo">
                        <img class="img-grey-hover" th:src="@{/assets/front/imgs/banner/brand-1.png}" alt="">
                    </div>
                    <div class="brand-logo">
                        <img class="img-grey-hover" th:src="@{/assets/front/imgs/banner/brand-2.png}" alt="">
                    </div>
                    <div class="brand-logo">
                        <img class="img-grey-hover" th:src="@{/assets/front/imgs/banner/brand-3.png}" alt="">
                    </div>
                    <div class="brand-logo">
                        <img class="img-grey-hover" th:src="@{/assets/front/imgs/banner/brand-4.png}" alt="">
                    </div>
                    <div class="brand-logo">
                        <img class="img-grey-hover" th:src="@{/assets/front/imgs/banner/brand-5.png}" alt="">
                    </div>
                    <div class="brand-logo">
                        <img class="img-grey-hover" th:src="@{/assets/front/imgs/banner/brand-6.png}" alt="">
                    </div>
                    <div class="brand-logo">
                        <img class="img-grey-hover" th:src="@{/assets/front/imgs/banner/brand-3.png}" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<footer th:replace="~{front/include::footer}"></footer>
<div th:insert="~{front/include::loader}"></div>
<div th:insert="~{front/include::scripts}"></div>
</body>

</html>